
<form class="layui-form layui-card" data-table-id="MenuTable" action="{:sysuri()}" data-auto="true" onSubmit="return false" method="post">

    <div class="layui-card-body">

       

        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input name="name" value='{$vo.name|default=""}'  lay-verify="required" placeholder="请输入标题" class="layui-input">
            </div>
        </div>

        <!-- 课程 -->
        <div class="layui-form-item">
            <label class="layui-form-label">所属计划</label>
            <label class="layui-input-inline">
                <select class="layui-select" id="parent_id"   lay-verify="required"  lay-filter="class_plan" name="parent_id">
                    <option value=''>- 全部 -</option>
                    {volist name="plan_list" id='plan'} 
                        <option  {if isset($vo.parent_id) && $vo.parent_id == $plan.id} selected {/if} value="{$plan.id}">{$plan.name}</option>
                    {/volist}
                </select>
            </label>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">学习的视频课程</label>
            <div class="layui-input-block">
                <div id="course"></div> <!-- 用于 xmSelect 渲染 -->
                <input type="hidden" name="course" id="course_input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">学习的题库</label>
            <div class="layui-input-block">
                <div id="exampaper"></div> <!-- 用于 xmSelect 渲染 -->
                <input type="hidden" name="exam" id="exampaper_input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">学习日期</label>
              <div class="layui-input-block" id="ID-laydate">
                 <input type="text" class="layui-input"  lay-verify="required" name="s_date" value="{$vo.s_date|default=''}" id="s_date" placeholder="选择日期">
              </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">所属第几周</label>
              <div class="layui-input-inline">
                 <input type="number" class="layui-input" min="1"  lay-verify="required" name="week" value="{$vo.week|default='1'}"  >
              </div>
            </div>
        </div>
   

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">学习描述</label>
            <div class="layui-input-block">
              <textarea placeholder="学习描述" name="description" class="layui-textarea">{$vo.description|default=''}</textarea>
            </div>
        </div>


       

    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" lay-submit type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>

{block name='script'}

<script>
    layui.use(['form', 'laydate','xmSelect'], function(){
    var form = layui.form;
    var laydate = layui.laydate;
    var $ = layui.$;
    var xmSelect = layui.xmSelect;
   ;
   function loadPlanDetail(plan_id) {
    if (!plan_id) return;
    $.post("{:url('content/class_plan_task/sys_get_plan')}", {plan_id: plan_id}, function(res){
        if (res.code == 1) {
            laydate.render({
                elem: '#s_date',
                min: res.data.detail.start_date,
                max: res.data.detail.end_date,
                value: '',
                trigger: "click"
            });

            var courseSelected = "{$vo.course|default=''}".split(',').filter(Boolean);
            var examSelected = "{$vo.exam|default=''}".split(',').filter(Boolean);

            var courseSelect = xmSelect.render({
                el: '#course',
                tips: '请选择视频课程',
                toolbar: { show: true },
                filterable: true,
                height: 'auto',
                theme: { color: '#404D5A' },
                data: res.data.video_list,
                on: function(data) {
                    var values = data.arr.map(item => item.value).join(',');
                    $('#course_input').val(values);
                }
            });
            courseSelect.setValue(courseSelected); // 设置选中项
            $('#course_input').val(courseSelected.join(',')); // 同步 input 值

            var exampaperSelect = xmSelect.render({
                el: '#exampaper',
                tips: '请选择题库',
                toolbar: { show: true },
                filterable: true,
                height: 'auto',
                theme: { color: '#404D5A' },
                data: res.data.exampaper_list,
                on: function(data) {
                    var values = data.arr.map(item => item.value).join(',');
                    $('#exampaper_input').val(values);
                }
            });
            exampaperSelect.setValue(examSelected);
            $('#exampaper_input').val(examSelected.join(','));
        } else {
            layer.msg(res.info || '计划加载失败');
        }
        form.render('select');
    });
}
 
    // 监听计划选择
    form.on('select(class_plan)', function(data){
        loadPlanDetail(data.value);
    });
    $(function(){
            var defaultPlanId = "{$vo.parent_id|default=''}";
            if (defaultPlanId) {
                $('#parent_id').val(defaultPlanId);
                form.render('select');
                loadPlanDetail(defaultPlanId);
            }
        });
});


</script>
{/block}
